<template>
  <div class="wrapper">
    <div class="img_bg_wrapper">
      <img :src="landing_bg" class="img_bg"/>
      <div class="avatar">
        <img :src="avatar" style="width: 64px;height:64px;"/>
      </div>
      <div class="hello">{{ welcomStr }}</div>
      <div class="hello_name">{{ helloName }}</div>
    </div>
    <div class="btn_wrapper">
      <div
          v-for="(item,index) in btnList"
          :key="index"
          @click="nav2url(item)"
          v-if="item.url"
          style="width: 33.3333%;display: flex;justify-content: center;"
      >
        <div class="btn">
          <div style="margin-bottom: 3px;width:8vw;height: 8vw;z-index: 10;">
            <img :src="item.icon" style="width: 100%;height: 100%;"/>
          </div>
          <div
              style="font-family: PingFangSC-Regular;font-size: 12px;color: #454592;letter-spacing: 0.26px;text-align: center;z-index: 2;"
          >{{ item.name }}
          </div>
          <div style=" position: absolute;top:38%;left:47%;width: 6vw;height: 6vw; ">
            <div style="width: 25px;height: 25px;background-color: rgb(234,202,76);filter: blur(5px)"
                 v-if="item.online"></div>
            <div style="width: 25px;height: 25px;background-color: rgb(177,184,62);filter: blur(5px)" v-else></div>

            <!--                        <img :src="Rectangle"/>-->
          </div>
        </div>
      </div>
    </div>
    <!--        <div v-if="testObject.email=='xiaoyun.wang@sanofi.com'">-->
    <!--            email:{{testObject.email}}<br/>-->
    <!--            access_token:{{testObject.access_token}}<br/>-->
    <!--            bu:{{testObject.bu}}<br/>-->
    <!--        </div>-->
  </div>
</template>

<script>
import landing_bg from "@assets/bg.png";

import Rectangle from "@assets/image/Rectangle.png";

import env from "@config/env";

import dayjs from "dayjs";

export default {
  name: "Landing",
  data() {
    return {
      dmMenuList: [],
      str: "",
      Rectangle: Rectangle,
      testObject: {
        ticket: sessionStorage.getItem("ihub-ticket"),
        name: sessionStorage.getItem("name"),
        access_token: sessionStorage.getItem("access-token"),
        avatar: sessionStorage.getItem("avatar"),
        bu: sessionStorage.getItem("bu"),
        email: sessionStorage.getItem("email"),
      },
      btnList: [],
      landing_bg: landing_bg,
      avatar: sessionStorage.getItem("avatar"),
      welcomStr: "",
      helloName: sessionStorage.getItem("name"),
    };
  },
  methods: {
    nav2url(item) {
      if (item.external) {
        if (item.needEmail) {
          let email = sessionStorage.getItem('email')
          if (email) {
            window.location.href = item.url + email;
          } else {
            alert(`未能正确获取系统参数！${email}`)
          }

        } else if (item.needToken) {
          let token = sessionStorage.getItem("access-token")
          window.location.href = item.url + token;
        } else {
          window.location.href = item.url;
        }
      } else {
        this.$router.push(item.url);
      }
    },
  }
  ,
  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
  }
  ,
  mounted() {
    this.str = dayjs().day();
    document
        .querySelector("body")
        .setAttribute(
            "style",
            "background: rgba(69, 69, 146, 0.10);padding: 0;margin: 0;"
        );
    let hour = new Date().getHours();
    if (hour >= 6 && hour < 12) {
      this.welcomStr = "Good morning";
    } else if (hour >= 12 && hour < 18) {
      this.welcomStr = "Good afternoon";
    } else if (hour >= 18 && hour <= 22) {
      this.welcomStr = "Good evening";
    } else {
      this.welcomStr = "Good night";
    }
    let bu = sessionStorage.getItem("bu");
    let role = sessionStorage.getItem("role");
    if (role == "REP") {

      let menu = env.BU_MENU;
      if (bu == "PC") {
        this.btnList = menu.pcbu;
      }
      if (bu == "CV") {
        this.btnList = menu.cvbu;
      }
      if (bu == "DBU") {
        this.btnList = menu.dbu;
      }
      if (bu == "SC") {
        this.btnList = menu.sc;
      }
      if (bu == "CV&EP") {
        this.btnList = menu.cvep;
      }
      if (bu == "CNS") {
        this.btnList = [];
      }
      if (bu == "commercialTrade") {
        this.btnList = menu.ih;
      }
    } else if (role == "DM") {
      let menu = env.DM_MENU;
      if (bu == "PC") {
        this.btnList = menu.pcbu;
      }
      if (bu == "CV") {
        this.btnList = menu.cvbu;
      }
      if (bu == "DBU") {
        this.btnList = menu.dbu;
      }
      if (bu == "SC") {
        this.btnList = menu.sc;
      }
      if (bu == "CV&EP") {
        this.btnList = menu.cvep;
      }
      if (bu == "CNS") {
        this.btnList = [];
      }
      if (bu == "commercialTrade") {
        this.btnList = menu.ih;
      }
    }else if (role == "RM") {
      let menu = env.RM_MENU;
      if (bu == "PC") {
        this.btnList = menu.pcbu;
      }
      if (bu == "CV") {
        this.btnList = menu.cvbu;
      }
      if (bu == "DBU") {
        this.btnList = menu.dbu;
      }
      if (bu == "SC") {
        this.btnList = menu.sc;
      }
      if (bu == "CV&EP") {
        this.btnList = menu.cvep;
      }
      if (bu == "CNS") {
        this.btnList = [];
      }
      if (bu == "commercialTrade") {
        this.btnList = menu.ih;
      }
    }
    // else {
    //     let menu = env.OTHER_MENU;
    //     this.btnList = menu;
    // }
  }
  ,
  // created() {
  //   let isForward=sessionStorage.getItem('isForward');
  //   let id=sessionStorage.getItem('dieatlID');
  //   if(isForward=='true'){
  //     //跳转到详情页面
  //     sessionStorage.setItem('isForward',false);
  //     this.$router.push({path: "/schedule/detail/index", query: {id: id}})
  //   }
  // }
};
</script>

<style scoped>
.wrapper {
  padding: 0;
}

.btn_wrapper {
  padding: 20px;
  flex-direction: row;
  flex-wrap: wrap;
  /*justify-content: space-between;*/
  display: flex;
}

.btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 25vw;
  height: 25vw;
  background: #ffffff;
  box-shadow: 2px 2px 4px 0 rgba(69, 69, 146, 0.4);
  border-radius: 4px;
  margin: 6px;
}

.img_bg {
  width: 100%;
  height: 220px;
}

.avatar {
  position: absolute;
  right: 5%;
  top: 14%;
}

.avatar img {
  width: 80px;
  border-radius: 50%;
}

.img_bg_wrapper {
  position: relative;
}

.hello {
  position: absolute;
  top: 10%;
  left: 5%;
  font-family: PingFangSC-Medium;
  font-size: 20px;
  color: #ffffff;
  letter-spacing: 0.38px;
  text-align: justify;
  line-height: 30px;
}

.hello_name {
  position: absolute;
  top: 27%;
  left: 5%;
  font-family: PingFangSC-Medium;
  font-size: 24px;
  color: #ffffff;
  letter-spacing: 0.45px;
  line-height: 36px;
}
</style>